<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            /* 如果需要用到父元素相对定位 */
            /* 则使用index提升被压住的部分 */
            position: relative;
            float: left;
            width: 300px;
            height: 400px;
            border: 1px solid #000000;
            /* 没有重叠的边框 */
            margin-left: -1px;
            margin-top: -1px;
        }
        div:hover {
            border:  1px solid orange;
            /* 被压住的边框升到最高处 */
            /* 定位的盒子是最高层的会压住标准流和浮动 */
            /* 只能用相对定位 因为相对定位占有位置 */
            z-index: 1;
        }
        .trangle {
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-bottom: 10px solid pink;
            border-left: 10px solid blue;
            border-right: 10px solid green;
            font-size:0;
            line-height:0;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="trangle">

    </div>
</body>
</html>